<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: rgba(39, 204, 190, 0.89);
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>

    <script>
        class Jq {
            constructor(arg, root) {
                // 是否有上一次操作的节点
                if (typeof root === 'undefined') {
                    this['prevObject'] = [document]
                } else {
                    this['prevObject'] = root
                }

                if (typeof arg === "function") {
                    //  dom 结构加载完毕执行代码    
                    this.ready(arg)
                } else if (typeof arg === "string") {
                    // 传入id 或者 class
                    let ele = document.querySelectorAll(arg);
                    this.addELement(ele)
                } else {
                    //传入的是js原生节点
                    if (typeof arg.length == 'undefined') {
                        //一个对象节点
                        this[0] = arg
                        this.length = 1
                    } else {
                        //多个对象节点
                        this.addELement(arg)

                    }
                }

            }
            // 获取指定一个
            eq(index) {
                return new Jq(this[index], this)
            }
            get(index) {
                return this[index]
            }
            //获取上一次操作的节点
            end() {
                return this['prevObject']
            }
            // 处理多个节点
            addELement(ele) {
                ele.forEach((el, index) => {
                    this[index] = el;
                })
                this.length = ele.length
            }
            // 处理方法直接
            ready(arg) {
                window.addEventListener("DOMContentLoade", arg, false)
            }
            // 点击事件
            click(fn) {
                // fn()
                for (let i = 0; i < this.length; i++) {
                    this[i].addEventListener("click", fn, false)
                }
            }
            on(eventName, fn) {
                let reg = /\s+/g;
                eventName = eventName.replace(reg, " ")
                let arr = eventName.split(" ")
                for (let i = 0; i < this.length; i++) {
                    for (let j = 0; j < arr.length; j++) {
                        this[i].addEventListener(arr[j], fn, false)
                    }
                }

            }
            css(...arg) {
                if (arg.length === 1) {
                    if (typeof arg[0] === 'string') {
                        if (arg[0] in $.cssHooks) {
                            return $.cssHooks[arg[0]].get(this[0]);
                        }
                        // 字符串
                        return this.getStyle(this[0], arg[0])
                    } else {
                        //传入的对象
                        for (let i = 0; i < this.length; i++) {
                            for (let j in arg[0]) {
                                this.setStyle(this[i], j, arg[0][j])
                            }
                        }
                    }
                } else {
                    // 多个参数
                    for (let i = 0; i < this.length; i++) {
                        this.setStyle(this[i], arg[0], arg[1]);
                    }
                }
                return this;
            }
            // 获取样式
            getStyle(ele, styleName) {
                return window.getComputedStyle(ele, null)[styleName]
            }
            // 设置样式
            setStyle(ele, styleName, styleValue) {
                if (typeof styleValue === 'number' && !(styleName in $.cssNumber)) {
                    styleValue = styleValue + "px"
                }
                if (styleName in $.cssHooks) {
                    $.cssHooks[styleName].set(ele, styleValue);
                } else {
                    ele.style[styleName] = styleValue;
                }
            }
        }

        function $(arg) {
            return new Jq(arg);
        }
        $.cssNumber = {
            animationIterationCount: true,
            columnCount: true,
            fillOpacity: true,
            flexGrow: true,
            flexShrink: true,
            fontWeight: true,
            gridArea: true,
            gridColumn: true,
            gridColumnEnd: true,
            gridColumnStart: true,
            gridRow: true,
            gridRowEnd: true,
            gridRowStart: true,
            lineHeight: true,
            opacity: true,
            order: true,
            orphans: true,
            widows: true,
            zIndex: true,
            zoom: true
        }
        $.cssHooks = {};

    </script>


    <script>
        $('.box1').click(function () {
            console.log("点击。。。。")
        })
        // console.log($('div'))
        // $('div').eq(1).click(function () {
        //     console.log("点击2")
        // })

        // $("div").eq(0).click(function () {

        // })

        let res = $('div').eq(1).end().click(function () {
            console.log("点击链式")
        })
        // console.log(res)
        $('.box1').on("mouseover", function (params) {
            console.log("111")
        })

        let style = $('.box1').css('background', "blue")
        console.log(style)
    </script>
</body>

</html>